﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Add-NewSubscription.aspx.cs" Inherits="Add_NewSubscription" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
     <link rel="stylesheet" type="text/css" href="css/select2_metro.css" />
    <link rel="stylesheet" type="text/css" href="css/chosen.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
    <script>
        function allowPositiveNo(evt) {

            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="row-fluid">
        <div class="span12">
            <form action="#" class="horizontal-form">
            </form>
            <div class="portlet box green" style="display:none;">
                <div class="portlet-title">
                    <div class="caption">
                        <asp:Label runat="server" ID="lblHeader" Text="Add/Edit Subscription"></asp:Label></div>
                </div>
                <div class="portlet-body form">
                    <div id="divMessage" runat="server" class="generalMessage">
                    </div>
                    <div class="row-fluid">
                        <div class="span6 ">
                            <div class="control-group" id="planName">
                                <label class="control-label">
                                    <span class="Required">*</span>Plan Name</label>
                                <div class="controls">
                                    <asp:TextBox runat="server" ID="txtSubscriptionName" CssClass="span12  pName"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6 ">
                            <div class="control-group" id="planAmount">
                                <label class="control-label">
                                    <span class="Required">*</span>Amount</label>
                                <div class="controls">
                                    <asp:TextBox runat="server" ID="txtAmount" CssClass="span12  pAmount"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6 ">
                            <div class="control-group" id="planDuration">
                                <label class="control-label">
                                    <span class="Required">*</span>Duration(In Month)</label>
                                <div class="controls">
                                    <asp:TextBox runat="server" ID="txtDuration" CssClass="span12  pDuration" onkeypress="return allowPositiveNo(event);"
                                        MaxLength="2"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <asp:Button ID="btnSave1" runat="server" OnClick="Save" Text="Save" CssClass="btn blue frmValidation" />
                        <button type="button" class="btn">
                            Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    </div>
    <script type="text/javascript">
        var msg = "Please check your validations in red.";
        $('.frmValidation').click(function () {

            var isError = "false";

            if ($('.pName').val() == "") {
                $('.pName').closest("div #planName").addClass("error");
                isError = "true";
            }
            else {
                $('.pName').closest("div #planName").removeClass("error");

            }
            if ($('.pDuration').val() == "") {
                $('.pDuration').closest("div #planDuration").addClass("error");
                isError = "true";
            }
            else {
                var data = $('.pDuration').val();
                var r = checkNumeric(data);
                alert(r);
                if (r == false) {
                    $('.pDuration').closest("div #planDuration").addClass("error");
                    isError = "true";
                }
                else {
                    $('.pDuration').closest("div #planDuration").removeClass("error");
                }
            }
            if ($('.pAmount').val() == "") {
                $('.pAmount').closest("div #planAmount").addClass("error");
                isError = "true";
            }
            else {
                var data = $('.pAmount').val();
                var r = checkNumeric(data);
                alert(r);
                if (r == false) {
                    $('.pAmount').closest("div #planAmount").addClass("error");
                    isError = "true";
                }
                else {
                    $('.pAmount').closest("div #planAmount").removeClass("error");
                }
            }

            if (isError == "true") {
                $(".generalMessage").html("<strong>Error!</strong> " + msg);
                $(".generalMessage").addClass("alert alert-danger");
                return false;
            }

        });
        function checkNumeric(data) {
            var len = data.length;
            var c;
            for (var i = 0; i < len; i++) {
                c = data.charAt(i).charCodeAt(0);
                if (c < 48 || c > 57) {
                    isError = "true";
                    return false;
                    break;
                }
                else {
                    return true;
                }
            }
        }
    </script>
    <div class="page-container row-fluid">
        <!-- BEGIN SIDEBAR -->
        <div class="page-sidebar nav-collapse collapse">
            <!-- BEGIN SIDEBAR MENU -->
            <!-- END SIDEBAR MENU -->
        </div>
        <!-- END SIDEBAR -->
        <!-- BEGIN PAGE -->
        <div>
            <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
            <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
            <!-- BEGIN PAGE CONTAINER-->
            <div class="container-fluid">
                <div class="row-fluid" style="display:none;">
                    <div class="span12">
                        <!-- BEGIN VALIDATION STATES-->
                        <div class="portlet box blue">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-reorder"></i>Validation States</div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                        class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                            class="remove"></a>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <h3 class="block">
                                    Basic validation states</h3>
                                <!-- BEGIN FORM-->
                                <form action="#" class="form-horizontal">
                                <div class="control-group warning">
                                    <label class="control-label" for="inputWarning">
                                        Input with warning</label>
                                    <div class="controls">
                                        <input type="text" class="span6 m-wrap" id="inputWarning" />
                                        <span class="help-inline">Something may have gone wrong</span>
                                    </div>
                                </div>
                                <div class="control-group error">
                                    <label class="control-label" for="inputError">
                                        Input with error</label>
                                    <div class="controls">
                                        <input type="text" class="span6 m-wrap" id="inputError" />
                                        <span class="help-inline">Please correct the error</span>
                                    </div>
                                </div>
                                <div class="control-group success">
                                    <label class="control-label" for="inputSuccess">
                                        Input with success</label>
                                    <div class="controls">
                                        <input type="text" class="span6 m-wrap" id="inputSuccess" />
                                        <span class="help-inline ok"></span>
                                    </div>
                                </div>
                                <div class="control-group warning">
                                    <label class="control-label">
                                        Input with warning</label>
                                    <div class="controls input-icon">
                                        <input type="text" class="span6 m-wrap" />
                                        <span class="input-warning tooltips" data-original-title="please write a valid email">
                                            <i class="icon-warning-sign"></i></span>
                                    </div>
                                </div>
                                <div class="control-group error">
                                    <label class="control-label">
                                        Input with error</label>
                                    <div class="controls input-icon">
                                        <input type="text" class="span6 m-wrap" />
                                        <span class="input-error tooltips" data-original-title="please write a valid email">
                                            <i class="icon-exclamation-sign"></i></span>
                                    </div>
                                </div>
                                <div class="control-group success">
                                    <label class="control-label">
                                        Input with success</label>
                                    <div class="controls input-icon">
                                        <input type="text" class="span6 m-wrap" />
                                        <span class="input-success tooltips" data-original-title="Success input!"><i class="icon-ok">
                                        </i></span>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn blue">
                                        Save</button>
                                    <button type="button" class="btn">
                                        Cancel</button>
                                </div>
                                </form>
                                <!-- END FORM-->
                            </div>
                        </div>
                        <!-- END VALIDATION STATES-->
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <!-- BEGIN VALIDATION STATES-->
                        <div class="portlet box purple">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-reorder"></i>Basic Validation</div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                        class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                            class="remove"></a>
                                </div>
                            </div>
        
                            <div class="portlet-body form">
                                <!-- BEGIN FORM-->
                                <form action="#" id="form_sample_1" class="form-horizontal">
                                <div class="alert alert-error hide">
                                    <button class="close" data-dismiss="alert">
                                    </button>
                                    You have some form errors. Please check below.
                                </div>
                                <div class="alert alert-success hide">
                                    <button class="close" data-dismiss="alert">
                                    </button>
                                    Your form validation is successful!
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Name<span class="required">*</span></label>
                                    <div class="controls">
                                        <input type="text" name="name" runat="server" clientidmode="Inherit" id="TXTnaME" data-required="1" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Name<span class="required">*</span></label>
                                    <div class="controls">
                                        <input type="text" name="name" data-required="2" class="span6 m-wrap" />
                                        
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Email<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="email" type="text"  value="k" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        URL<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="url" type="text" runat="server" id="txte" class="span6 m-wrap" />
                                        <span class="help-block">e.g: http://www.demo.com or http://demo.com</span>
                                    </div>
                                </div>
                                 <div class="control-group">
                                    <label class="control-label">
                                        URL<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="url" runat="server" id="txtemail1" type="text" class="span6 m-wrap" />
                                        <span class="help-block">e.g: http://www.demo.com or http://demo.com</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Number<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="number" type="text" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Digits<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="digits" type="text" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Credit Card<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="creditcard" type="text" class="span6 m-wrap" />
                                        <span class="help-block">e.g: 5500 0000 0000 0004</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Occupation&nbsp;&nbsp;</label>
                                    <div class="controls">
                                        <input name="occupation" type="text" class="span6 m-wrap" />
                                        <span class="help-block">optional field</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Category<span class="required">*</span></label>
                                    <div class="controls">
                                        <select class="span6 m-wrap" name="category">
                                            <option value="">Select...</option>
                                            <option value="Category 1">Category 1</option>
                                            <option value="Category 2">Category 2</option>
                                            <option value="Category 3">Category 5</option>
                                            <option value="Category 4">Category 4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn purple">
                                        Validate</button>
                                    <button type="button" class="btn">
                                        Cancel</button>
                                </div>
                                </form>
                                <!-- END FORM-->
                            </div>
                        </div>
                        <!-- END VALIDATION STATES-->
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <!-- BEGIN VALIDATION STATES-->
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-reorder"></i>Advance Validation</div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                        class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                            class="remove"></a>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <!-- BEGIN FORM-->
                                <h3>
                                    Advance validation of custom radio buttons, checkboxes and chosen dropdowns</h3>
                                <form action="#" id="form_sample_2" class="form-horizontal">
                                <div class="alert alert-error hide">
                                    <button class="close" data-dismiss="alert">
                                    </button>
                                    You have some form errors. Please check below.
                                </div>
                                <div class="alert alert-success hide">
                                    <button class="close" data-dismiss="alert">
                                    </button>
                                    Your form validation is successful!
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Name<span class="required">*</span></label>
                                    <div class="controls">
                                        <input type="text" name="name" data-required="1" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Email<span class="required">*</span></label>
                                    <div class="controls">
                                        <input name="email" type="text" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Occupation&nbsp;&nbsp;</label>
                                    <div class="controls">
                                        <input name="occupation" type="text" class="span6 m-wrap" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Category<span class="required">*</span></label>
                                    <div class="controls">
                                        <select class="span6 m-wrap" name="category">
                                            <option value="">Select...</option>
                                            <option value="Category 1">Category 1</option>
                                            <option value="Category 2">Category 2</option>
                                            <option value="Category 3">Category 5</option>
                                            <option value="Category 4">Category 4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Chosen Dropdown<span class="required">*</span></label>
                                    <div class="controls chzn-controls">
                                        <select id="form_2_chosen" class="span6 chosen" data-with-diselect="1" name="options1"
                                            data-placeholder="Choose an Option" tabindex="1">
                                            <option value="">Select...</option>
                                            <option value="Option 1">Option 1</option>
                                            <option value="Option 2">Option 2</option>
                                            <option value="Option 3">Option 3</option>
                                            <option value="Option 4">Option 4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Select2 Dropdown<span class="required">*</span></label>
                                    <div class="controls select2-wrapper">
                                        <select id="form_2_select2" class="span6" name="options2">
                                            <option value="">Select...</option>
                                            <option value="Option 1">Option 1</option>
                                            <option value="Option 2">Option 2</option>
                                            <option value="Option 3">Option 3</option>
                                            <option value="Option 4">Option 4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Membership<span class="required">*</span></label>
                                    <div class="controls">
                                        <label class="radio line">
                                            <input type="radio" name="membership" value="1" />
                                            Fee
                                        </label>
                                        <label class="radio line">
                                            <input type="radio" name="membership" value="2" />
                                            Professional
                                        </label>
                                        <div id="form_2_membership_error">
                                        </div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        Services<span class="required">*</span></label>
                                    <div class="controls">
                                        <label class="checkbox line">
                                            <input type="checkbox" value="1" name="service" />
                                            Service 1
                                        </label>
                                        <label class="checkbox line">
                                            <input type="checkbox" value="2" name="service" />
                                            Service 2
                                        </label>
                                        <label class="checkbox line">
                                            <input type="checkbox" value="3" name="service" />
                                            Service 3
                                        </label>
                                        <span class="help-block">(select at least two)</span>
                                        <div id="form_2_service_error">
                                        </div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        WYSIHTML5 Editor<span class="required">*</span></label>
                                    <div class="controls">
                                        <textarea class="span12 wysihtml5 m-wrap" rows="6" name="editor1" data-error-container="#editor1_error"></textarea>
                                        <div id="editor1_error">
                                        </div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">
                                        CKEditor<span class="required">*</span></label>
                                    <div class="controls">
                                        <textarea class="span12 ckeditor m-wrap" name="editor2" rows="6" data-error-container="#editor2_error"></textarea>
                                        <div id="editor2_error">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn green">
                                        Validate</button>
                                    <button type="button" class="btn">
                                        Cancel</button>
                                </div>
                                </form>
                                <!-- END FORM-->
                            </div>
                        </div>
                        <!-- END VALIDATION STATES-->
                    </div>
                </div>
                <!-- END PAGE CONTENT-->
            </div>
            <!-- END PAGE CONTAINER-->
        </div>
        <!-- END PAGE -->
    </div>
       <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
    <script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
    <script type="text/javascript" src="js/select2.min.js"></script>
    <script type="text/javascript" src="js/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="js/wysihtml5-0.3.0.js"></script>
    <script type="text/javascript" src="js/bootstrap-wysihtml5.js"></script>
    <script type="text/javascript" src="js/ckeditor.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <script src="js/app.js"></script>
    <script src="js/form-validation.js"></script>
    <script>
        jQuery(document).ready(function () {
            // initiate layout and plugins
           
            FormValidation.init();
        });
    </script>
</asp:Content>
